<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>position的sticky属性演示学习</title>
</head>
<style>
	*{
		padding:0;
		margin: 0;
	}
	.parent{
		width:500px;
		height: 1000px;
		background-color: red;
		/*margin:100px aotu;*/
		color: white;
		/*overflow: auto;*/
		/*overflow:visible; */
	}
	.parent2{
		width:300px;
		height: 990px;
		background-color:yellow;
		/*overflow: auto;*/
		/*overflow:visible; */
	}
	.son{
		width:100px;
		height: 950px;
		background-color:green;
		/*margin:100px aotu;*/
		color: black;
		text-align: center;
		line-height: 100px;

		position: sticky;

		top: 50px;
		/*bottom: 0px;*/

	}
	.son2{
		width:100px;
		height: 600px;
		background-color:blue;

	}
</style>
<body>
		<!-- 1、如果父元素把页面撑出滚动条，子元素有sticky属性，偏移值top是相对于页面顶部的距离
		     2、 子元素有sticky属性也是不脱离文档流的，占据空间的
		     3、如果是子元素将父元素撑开进度条，那么子元素家里sticky属性的偏移值是相对于父元素的
		     4、
		 -->


	<div class="parent">
		<!-- <div class="baiozhun" style="background-color: purple;height: 50px"></div> -->
		<div class="parent2">
			<div class="son">我是子元素</div>
		</div>
		
		<!-- 11111111111111111111111111111111111111111 -->
		<!-- <div class="son2"></div> -->
	</div>
	<div class="parent_sibiling" style="background-color:orange;height: 5000px"></div>

	
</body>
</html>